/* 消除边距 */
* {
  margin: 0;
  padding: 0;
}
img {
  display: block;
}
.out {
  margin: 0 auto;
  overflow: hidden;
}
.out .box {
  height: 300px;
  background: #ccc;
  float: left;
  margin: 0 20px 20px 0 ;
}
.out .box:nth-child(4n) {
  margin-right: 0;
}
@media (max-width: 768px) {
  .out {
    width: auto;
  }
  .out .box {
    width: 320px;
    float: none;
    margin-left: auto ;
    margin-right: auto;
  }
  .out .box:nth-child(4n) {
    margin-right: auto;
  }
}
@media (min-width: 768px) {
  .out {
    width: 680px;
  }
  .out .box {
    width: 320px;
    margin-right: 40px;
  }
  .out .box:nth-child(2n) {
    margin-right: 0;
  }
}
@media (min-width: 992px) {
  .out {
    width: 960px;
  }
  .out .box {
    width: 290px;
    margin-right: 45px;
  }
  .out .box:nth-child(2n) {
    margin-right: 45px;
  }
  .out .box:nth-child(3n) {
    margin-right: 0;
  }
}
@media (min-width: 1200px) {
  .out {
    width: 1100px;
  }
  .out .box {
    width: 260px;
    margin-right: 20px;
  }
  .out .box:nth-child(2n) {
    margin-right: 20px;
  }
  .out .box:nth-child(3n) {
    margin-right: 20px;
  }
  .out .box:nth-child(4n) {
    margin-right: 0px;
  }
}
@media (min-width: 1400px) {
  .out {
    width: 1300px;
  }
  .out .box {
    width: 300px;
    margin-right: 33.3333px;
  }
  .out .box:nth-child(2n) {
    margin-right: 33.3333px;
  }
  .out .box:nth-child(3n) {
    margin-right: 33.3333px;
  }
  .out .box:nth-child(4n) {
    margin-right: 0px;
  }
}
